<html>
	<head>
		<meta charset="utf-8">
		<title>显示隐藏密码明文</title>
		<style>
			.box{ 
				width:400px;
				border-bottom:1px solid #ccc;
				margin:100px auto;
				position: relative;
			}
			.box input{
				width:370px;
				height:30px;
				border:0;
				outline:none;
			}
			.box img{
				position:absolute;
				top:10px;
				right:30px;
				width:24px;
				margin-bottom:10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<label for=''>
				<img src='img/dl.jpg' id='eye'>
			</label>
			<input type="password" name="" id="pwd">
		</div>
		<script>
			var eye=document.getElementById('eye');
			var pwd=document.getElementById('pwd');
			var flag=0;			
			eye.onclick=function(){
				if(flag==0){
				   pwd.type='text';
				   flag=1;
				} else{
					pwd.type='password';
					flag=0;
				}
			}
		</script>
	</body>
</html>
